<template>
	<u-navbar height="44" :is-back="false" :background="{
				'background-image': 'linear-gradient(45deg, rgb(41, 121, 255), rgb(41, 198, 255))'
			}">
		<view class="search-wrap">
			<u-row gutter="16">
				<u-col span="4" style="padding: 0;">
					<view class="position" @click="resetPosition">
						<u-icon name="map" style="margin-right:8upx;"></u-icon>
						<text class="u-line-1 u-font-12">{{district}}</text>
					</view>
				</u-col>
				<u-col span="8">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model="keyword" placeholder="输入查询关键字" @search="search" :clearabled="true" :animation="true"
					 :show-action="false" :action-style="{color: '#fff'}"></u-search>
				</u-col>
			</u-row>
		</view>
		<u-modal v-model="show" title="提示" width="80%" content="手机设置 应用与权限 应用权限 吃客配送 开启定位权限" :mask-close-able="true"></u-modal>
	</u-navbar>
</template>

<script>
	import LocationTool from '@/common/LocationTool.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'g-pond-navbar',
		computed: {
			...mapGetters(['location']),
			district() {
				if (this.islocation === true) {
					return '正在获取...'
				}
				if (this.fail) {
					return '未能获取定位'
				}
				if (this.location && this.location.address) {
					if (this.location.address.district) {
						return this.location.address.district;
					} else if (this.location.address.city) {
						return this.location.address.city;
					} else {
						return 'address为空'
					}
				}
				return '无address'
			}
		},
		data() {
			return {
				keyword: '',
				islocation: false,
				fail: true,
				// 
				show: false
			}
		},
		mounted() {
			this.makeLocation()
		},
		methods: {
			search() {
				console.log('搜索内容', this.keyword)
			},
			makeLocation(){
				this.islocation = true
				LocationTool.makeLocation((res) => {
					this.fail = false
					this.$store.dispatch('location.change', res)
				}, (fail) => {
					this.fail = true
					this.show = true
				}, () => {
					this.islocation = false
				})
			},
			resetPosition() {
				this.makeLocation()
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-wrap {
		width: 100%;
		padding: 0 24upx;
	}

	.search-wrap .position {
		font-size: 36upx;
		color: #ffffff;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		/*  #ifdef MP-WEIXIN */
		height:35px;
		/*  #endif  */
	}
</style>
